<template>
  <svg>
    <path :d="d" stroke="grey" fill="none"></path>
    <template v-if="data.title.startsWith('url:')">
      <a :xlink:href="data.title.split(' ')[2]" target="_blank">
        <rect :x="data.x" :y="data.y-data.height/4" :width="data.width" :height="data.height/2" fill="green" rx="5"
              ry="5">
        </rect>
        <text :x="data.x+10" :y="data.y+data.height/8" :width="data.width" :height="data.height/2" style="fill:white">
          {{ data.title.split(' ')[1] }}
        </text>
      </a>
    </template>
    <template v-else-if="data.title.startsWith('->')">
      <a :xlink:href="'/#/home/'+(data.title.split(' ')[2] || data.title.split(' ')[1])">
        <rect :x="data.x" :y="data.y-data.height/4" :width="data.width" :height="data.height/2" fill="red" rx="5"
              ry="5">
        </rect>
        <text :x="data.x+10" :y="data.y+data.height/8" :width="data.width" :height="data.height/2" style="fill:white">
          {{ data.title.split(' ')[1] }}
        </text>
      </a>
    </template>
    <template v-else-if="data.title === '.'">
      <path :d="`M ${data.x} ${data.y} L ${data.x+data.width} ${data.y}`" stroke="grey"
            v-if="data.children.length!=0">
      </path>
    </template>
    <template v-else-if="data.title.startsWith('latex: ')">
      <g :transform="`translate(${data.x},${data.y-data.height/4})`">
        <!--100-->
        <foreignObject :width="data.width+5" :height="data.height/2+10"
                       style="background-color: blue;border-radius: 5px;padding: 0 10px">
          <div v-katex="data.title.slice(7)"></div>
        </foreignObject>
      </g>
    </template>
    <template v-else>
      <rect :x="data.x" :y="data.y-data.height/4" :width="data.width" :height="data.height/2" fill="#333" rx="5"
            ry="5">
      </rect>
      <text :x="data.x+10" :y="data.y+data.height/8" :width="data.width" :height="data.height/2" style="fill:white">
        {{ data.title }}
      </text>
    </template>
    <template v-if="data.children.length!=0">
      <MyNode v-for="(node,idx) in data.children" :key="node.title+idx" :data="node"></MyNode>
    </template>
    <path :d="`M ${data.x+data.width} ${data.y} L ${data.x+data.width+10} ${data.y}`" stroke="#333"
          v-if="data.children.length!=0">
    </path>
  </svg>
</template>

<script>
export default {
  name: "MyNode",
  props: {
    value: String,
    key_: String,
    data: Object
  },
  computed: {
    d() {
      let ax = this.data.ax
      let ay = this.data.ay
      let bx = this.data.bx
      let by = this.data.by
      let cy = this.data.cy

      return `M ${ax} ${ay} L ${ax} ${cy} Q ${ax} ${by} ${ax + 10} ${by} L ${bx} ${by}`
    }
  },
  created() {
  }
}
</script>

<style scoped>

</style>
